<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>智能锁控制器</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="__ROOT__/public/static/home/js/jquery-2.1.4.min.js" type="text/javascript"></script>
		<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

	<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
    <div class="container">
        <input type="text" style="margin-top:30%;" class="form-control" id="lock_number" placeholder="请输入锁编号">
        <div style="width: 100%;height: 80px;margin-top: 20px">
            <p>锁号：<span id="span-lock-number"></span></p>
            <p>状态：<span id="span-use-status"></span></p>
        </div>
        <div>
		  <button id="test-lock" type="button" class="btn btn-success" style="width:80px;margin-bottom:30px">检测</button>&nbsp;&nbsp;
		  <button id="open-lock" type="button" class="btn btn-primary" style="width:80px;margin-bottom:30px">开锁</button>&nbsp;&nbsp;
		  <button id="close-lock" type="button" class="btn btn-warning" style="width:80px;margin-bottom:30px">关锁</button>&nbsp;&nbsp;
          <button id="clear" type="button" class="btn btn-default" style="width:80px;margin-bottom:30px">清除</button>&nbsp;&nbsp;
          <button id="end-use" type="button" class="btn btn-danger" style="width:80px;margin-bottom:30px">踢人</button>&nbsp;&nbsp;
		</div>
        <span class="info" style="color: #999"></span>
    </div>
</body>
<script type ="text/javascript">
        $("#clear").click(function(){
            $("#span-lock-number").text('');
            $("#span-use-status").text('');
            $(".info").text('');
        })

        $("#end-use").click(function(){
            var number = $("#lock_number").val();
            var url = "{:Url('index/endUse')}"+"?number="+number;

            $.ajax({  
                url: url,  
                dataType: "json",  
                async:true, 
                cache: false,  
       
                success: function (data) {
                    if(data.status == 1){
                       $(".info").text("剔出成功！");
                    }else{
                       $(".info").text("踢出失败！");
                    }
                }  
            });  

        })

        $("#test-lock").click(function(){
            var lock_number = $("#lock_number").val();
        	var url = "{:Url('index/test')}"+"?lock_number="+lock_number;

            $.ajax({  
                url: url,  
                dataType: "json",  
                async:true, 
                cache: false,  
       
                success: function (data) {
                    var info = '检测失败';
                    if(data.status == 1){
                        var info = '开';
                    }

                    if(data.status == 2){
                        var info = '关';
                    }
                    $("#span-lock-number").text(lock_number);
                    $("#span-use-status").text(info);
                }  
            });  
        })

        //开锁
        $("#open-lock").click(function(){
            var lock_number = $("#lock_number").val();
            var url = "{:Url('index/openLock')}"+"?lock_number="+lock_number;

            $.ajax({  
                url: url,  
                dataType: "json",  
                async:true, 
                cache: false,  
       
                success: function (data) {
                   if(data.status == 1){
                      $(".info").text("开锁成功！");
                   }else{
                      $(".info").text("开锁失败！");
                   }
                }  
            });  
        })

        //关锁
        $("#close-lock").click(function(){
            var lock_number = $("#lock_number").val();
            var url = "{:Url('index/closeLock')}"+"?lock_number="+lock_number;

            $.ajax({  
                url: url,  
                dataType: "json",  
                async:true, 
                cache: false,  
       
                success: function (data) {
                   if(data.status == 1){
                       $(".info").text("关锁成功！");
                       
                   }else{
                      $(".info").text("关锁失败！");
                   }
                }  
            });  
        })
</script>
</html>